<template>
    <div>
        <div id="demo">
            <button v-on:click="show = !show">
                Toggle
            </button>
            <transition name="fade">
                <p v-if="show">hello</p>
            </transition>
        </div>
        <button @click="toggleVisible">transition</button>
        <!--方法一-->
        <transition
                enter-active-class="animate__bounceInDown"
                leave-active-class="animate__bounceOutDown"
        >
            <h1 v-show="visible" class="animate__animated">Animate.css</h1>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "Animate",
        data(){
            return{
                show: true,
                visible:false,
            }

        },
        methods:{
            toggleVisible () {
                this.visible = !this.visible
            }
        }
    }
</script>

<style scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
</style>